<!DOCTYPE html>
<html>
<title>结账</title>
<script>
    var require = {
        "baseUrl": "https://www.bulgari.cn/static/version1521191295/frontend/Silk/Bulgari_zh/zh_Hans_CN"
    };
</script>
<head>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../js/other/place.js"></script>
<script type="text/javascript" src="../../js/Popt.js"></script>
<script type="text/javascript" src="../../js/cityJson.js"></script>
<script type="text/javascript" src="../../js/citySet.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/other/account.css" />
<link rel="stylesheet" type="text/css" href="../../css/other/area.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	$(function(){
		reload();
		//查询购物车内的商品
		var url="../../indentAction/findMessageByKeepId";
		$.post(url,function(mess){
			var sum=0;
			var str="<table id='message'><tr><td style='border-bottom:solid 1px gray;' colspan='4' text-align:'center'>购物车信息</td></tr>"+
					"<tr><td>商品</td><td>份数</td><td>单价</td><td>小计</td></tr>";
					var foodId="";
					var foodNum="";
			for(var i=0;i<mess.length;i++){
				str+="<tr><td>"+mess[i].foodName+"</td>"+
							"<td>"+mess[i].foodNum+"</td>"+
							"<td>"+mess[i].foodPrice+"</td>"+
							"<td>"+mess[i].foodAllPrice+"</td>"+
							"</tr>";
							foodId+=mess[i].foodId+"_";
							foodNum+=mess[i].foodNum+"_";
				sum+=parseInt(mess[i].foodAllPrice);
			}
			$("#foodNum").val(foodNum);
			$("#foodId").val(foodId);
			str+="<tr id='xian'><td colspan='2'>共"+mess.length+"种商品</td>"+
						"<td>总价"+sum+"</td>"+
						"<td><button id='LastAccount'>结算</button></td>"+
					"</tr></table>";
					$("#price").val(sum);
			$("#cartDetails").html(str);
			$("#mealId").val(mess[0].mealId);
			//增加订单的方法
			
			$("#LastAccount").click(function(){
				if($("#plMess").val()==""){
					alert("请选择一个地址");
				}else{
					var url="../../indentAction/addIndent";
					var data=$("#form-indent").serialize();
					$.post(url,data,function(mess){
						$("#successful").show();
					})
				}
			})
		});
		//增加地址
		$("#bu").click(function(){
			var url="../../siteAction/addOrUpdateSite";
			var data=$("#form-validate").serialize();
			$.post(url,data,function(mess){
				$("#addPlace").hide();
				reload();
				$("#form-validate input").val("");
			})
		});
	});
	
	function reload(){
		//查询所有地址的方法
		var url="../../siteAction/findAll";
		$.post(url,function(mess){
			var str="";
			for(var i=0;i<mess.length;i++){
				str+="<div class='place' name='"+mess[i].siteId+"'>"+
					 "<p class='def' id='mr"+mess[i].siteId+"'>"+mess[i].userName+"</p>"+
				     "<p class='def' id='ph"+mess[i].siteId+"'>"+mess[i].userPhone+"</p>"+
					 "<p id='pl"+mess[i].siteId+"'>"+mess[i].siteName+"</p>"+
					 "<span class='update' name='"+mess[i].siteId+"'>修改</span>"+
					 "<span class='delete' name='"+mess[i].siteId+"'>X</span>"+
					 "</div>";
			}
			
			$("#mrl").html(str);
			
			$(".place").click(function(){
				for(var i=0;i<$(".place").length;i++){
					$(".place").eq(i).css("border-color","#DDDDDD");
				}
				if($(this).attr("id")!="newPlace"){
					$(this).css("border-color","black");
					$("#plMess").val($("#pl"+$(this).attr("name")).text());
					$("#usMess").val($("#mr"+$(this).attr("name")).text());
					$("#phMess").val($("#ph"+$(this).attr("name")).text());
				};
			});
			
			//删除地址的方法
			$(".delete").click(function(){
				var url="../../siteAction/deleteSite";
				var data={'siteId':$(this).attr("name")};
				$.post(url,data,function(mess){
					reload();
				});
			});
			
			//修改地址上屏的方法
			$(".update").click(function(){
				$("#addPlace").fadeIn();
				var url="../../siteAction/selectByPrimaryKey";
				var data={'siteId':$(this).attr("name")};
				$.post(url,data,function(mess){
					for (var item in mess) {
						$('.input-xlarge').each(function(){
							if($(this).attr("name")==item){
								$(this).val(mess[item]);
							}
						});
					}
				});
			});
		},"json");
	}
	//手机号码验证的方法
	function phone(obj){
		var p =/^[1][3,4,5,7,8][0-9]{9}$/;
		var str=obj.value;
		var phone=document.getElementById("phone");
		if(!p.test(str)){
			$("#phone").html("<font color='red' size='1px'>请输入正确的手机号码</font>");
			return;
		}else{
			$("#phone").html("<font color='green' size='1px'>√</font>");
		}
	}
	
</script>
<script type="text/javascript" src="../../js/other/account.js"></script>
<style type="text/css">
body{
	background-color: #E4E4E4;
}
.update{
	position: relative;
	top:-172px;
	left:130px;
	width:20px;
}
.delete{
	position: relative;
	top:-172px;
	left:-90px;
	width:20px;
}
#successful{
	position: fixed;
	left:200px;
	width:200px;
	height:200px;
	line-height:200px;
	text-align:center;
	background-color:white;
	display: none;
	z-index:100;
	font:bold 20px '宋体';
	padding:80px;
}
#sure a{
	text-decoration:none;
	font:bold 16px '宋体';
	color: white;
}
#sure{
	width: 80px;
	height: 40px;
	line-height:40px;
	align:center;
	background-color:#9CCE37 ;
	border-radius: 5px;
	margin:60px;
}
#sure:hover{
	background-color: #C8BD37;
}
</style>
</head>
<body>
	<div id="addPlace">
		<div id="plHead">
			<span>新地址</span>
			<span id="close">X</span>
		</div>
		<form class="form-address-edit" method="post" id="form-validate">
			<input type="hidden" id="plId" name="siteId" value="" class="input-xlarge">
			<fieldset class="fieldset">
				<div id="nameDiv" class="field country required">
					<label class="label"><span>收货人</span></label>
					<div class="control">
						<input type="text" name="oper" id="plName" class="input-xlarge" maxlength="30">
					</div>
				</div>
				<div id="phoneDiv" class="field country required">
					<label class="label"><span>手机号码</span></label>
					<div class="control">
						<input type="text" name="sort" id="plPhone" class="input-xlarge" maxlength="11"  onblur="phone(this);">
						<span id="phone"></span>
					</div>
				</div>
			<div style="width:520px;margin:40px auto;" id="area">
				所在地区：<input type="text" id="city" name="siteName" style="width:350px;" class="input-xlarge"/>
			</div>
			
			<script type="text/javascript">
			$("#city").click(function (e) {
				SelCity(this,e);
			});
			</script>
			</fieldset>
			
			<div class="actions-toolbar">
				<div class="primary">
					<button type="button" id="bu" class="action save primary"
						data-action="save-address"
						title="&#x4FDD;&#x5B58;&#x5730;&#x5740;">
						<span id="keepPlace">保存地址</span>
					</button>
				</div>
			</div>
		</form>
	</div>
	<form method="post" id="form-indent">
			<input type="hidden" name="mealId" id="mealId">
			<input type="hidden" name="indPrice" id="price">
			<input type="hidden" name="indSite" id="plMess">
			<input type="hidden" name="oper" id="usMess">
			<input type="hidden" name="indState" id="phMess">
			
			
			<input type="hidden" name="foodId" id="foodId">
			<input type="hidden" name="foodNum" id="foodNum">
	</form>
	<div id="page"><span>配送信息</span></div>
	<div id="pageMess">
		<div id="placeDiv">
		<span style="width:660px;">送货地址</span>
		<div id="place">
		</div>
		<div id="newPlace" class="place">
			<span>+ 新地址</span>
		</div>
		<div id='mrl'></div>
		</div>
	</div>
	
	<div id="cartDetails"></div>
	
	<div id="successful">
		<img alt="" src="../../upload/gou.png">
		<br>
		结算成功!
		<br>
		<div id="sure">
			<a href="../index.html">确定</a>
		</div>
	</div>
	
</body>
</html>